<!DOCTYPE html>
<HTML>
<head>
    <title></title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" th:href="@{/jquery-weui/lib/weui.css}">
    <link rel="stylesheet" th:href="@{/jquery-weui/css/jquery-weui.css}">
    <style>
        /* 全局重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,html{
            height: 100%;
            overflow: hidden;
        }
        body {
            background-repeat: no-repeat;
            background-position: center center; /* 始终居中，优先保留中间内容 */
            background-attachment: fixed;
            position: relative;
        }
        /* 音频和视频样式 */
        .audio-container {
            position: fixed;
            bottom: 220px; /* 音频位置上移，适配视频底部留白 */
            left: 0;
            right: 0;
            width: 100%;
            padding: 0 10px;
        }
        .audio-content {
            width: 100%;
            text-align: center;
        }
        .video-container {
            position: fixed;
            bottom: 15px; /* 视频区域距离底部留白15px */
            left: 0;
            right: 0;
            width: 100vw;
            height: auto;
            padding: 0 10px; /* 左右也增加一点留白，视觉更舒适 */
        }
        #myVideo {
            width: 100%;
            height: auto;
            max-height: 190px;
            display: block;
            vertical-align: bottom;
            border: 0;
            object-fit: cover;
            object-position: center;
            border-radius: 8px; /* 增加一点圆角，配合留白更美观 */
        }
    </style>
</head>
<body>
<!-- 音频部分 -->
<div class="audio-container">
    <div class="audio-content">
        <audio id="background-music" controls="controls" style="width: 100%;">
            <source id="audioSource" type="audio/mpeg">
            您的浏览器不支持在线播放音频！
        </audio>
    </div>
</div>

<!-- 视频部分 -->
<div class="video-container">
    <video id="myVideo" controls poster="">
        <source id="videoSource" type="video/mp4">
        您的浏览器不支持视频播放
    </video>
</div>

<script type="text/javascript" th:src="@{/jquery-weui/lib/jquery-2.1.4.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jquery-weui/lib/fastclick.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/jquery-weui/js/jquery-weui.js}" charset="utf-8"></script>
<script>
    var url = "[[${serverUrl}]]/stamp/h5/api/";
    var url_sp = "[[${serverUrl}]]/stamp/tp/";
    var sp = "[[${sp}]]";
    var url_tp = "[[${serverUrl}]]/stamp/tp/";

    console.info("要播放的音频：" + sp);

    function init_data(){
        const audio = document.getElementById('background-music');
        const audioSource = document.getElementById('audioSource');
        const video = document.getElementById('myVideo');
        const videoSource = document.getElementById('videoSource');

        if (sp) {
            const bgUrl = `${url_sp}spfm?id=${sp}`;
            document.body.style.backgroundImage = `url('${bgUrl}')`;

            // 关键：通过图片比例与屏幕比例适配，消除两侧空白
            const img = new Image();
            img.src = bgUrl;
            img.onload = function() {
                const imgWidth = this.width;
                const imgHeight = this.height;
                const screenWidth = window.innerWidth;
                const screenHeight = window.innerHeight;

                // 计算图片和屏幕的宽高比（宽度/高度）
                const imgRatio = imgWidth / imgHeight; // 图片宽高比
                const screenRatio = screenWidth / screenHeight; // 屏幕宽高比

                // 根据比例差异决定适配方式
                if (Math.abs(imgRatio - screenRatio) < 0.3) {
                    // 1. 比例接近（差值<0.3）：直接铺满屏幕，无空白且裁剪少
                    document.body.style.backgroundSize = "cover";
                } else if (imgRatio > screenRatio) {
                    // 2. 图片更宽（横版图片在竖屏手机）：优先保证高度填满，轻微裁剪左右边缘
                    document.body.style.backgroundSize = "auto 100%";
                } else {
                    // 3. 图片更高（竖版图片在横屏手机）：优先保证宽度填满，轻微裁剪上下边缘
                    document.body.style.backgroundSize = "100% auto";
                }
            };

            // 音频和视频设置
            if (audioSource) {
                audioSource.src = `${url_sp}spvideo?id=${sp}`;
                audio.load();
            }

            if (videoSource) {
                video.poster = `${url_tp}spfm1?id=${sp}`;
                videoSource.src = `${url_tp}spvideo1?id=${sp}`;
                video.load();
            }

            fetch(url_sp + "getbt?id=" + sp)
                .then(response => {
                    if (!response.ok) throw new Error('请求失败');
                    return response.text();
                })
                .then(data => { document.title = data; })
                .catch(error => { console.error('获取标题时出错：', error); });
        }
    }

    // 音频与视频互斥播放逻辑
    function setupMediaMutex() {
        const audio = document.getElementById('background-music');
        const video = document.getElementById('myVideo');

        // 音频播放时暂停视频
        audio.addEventListener('play', function() {
            if (!video.paused) {
                video.pause();
                console.log('音频播放，已暂停视频');
            }
        });

        // 视频播放时暂停音频
        video.addEventListener('play', function() {
            if (!audio.paused) {
                audio.pause();
                console.log('视频播放，已暂停音频');
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        init_data();
        setupMediaMutex(); // 初始化媒体互斥逻辑

        // 音频和视频播放处理
        const audio = document.getElementById('background-music');
        const playAudioPromise = audio.play();
        if (playAudioPromise) {
            playAudioPromise
                .then(() => { console.log('音频自动播放成功'); })
                .catch(error => { console.warn('音频自动播放被阻止:', error); });
        }

        const video = document.getElementById('myVideo');
        const playVideoPromise = video.play();
        if (playVideoPromise) {
            playVideoPromise
                .then(() => { console.log('视频自动播放成功'); })
                .catch(error => { console.warn('视频自动播放被阻止:', error); });
        }

        // 屏幕旋转时重新适配
        window.addEventListener('resize', function() {
            if (sp) init_data();
        });
    });
</script>
</body>
</html>